<template>
  <div class="Myfooter">
    <ul>
      <li v-for="data in list" :key="data.id">
        <router-link :to="data.path" active-class="active" tag="div">
          <img :src="data.img">
          <p>{{data.name}}</p>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Myfooter",
  data() {
    return {
      list: [
        {
          path: "/index",
          name: "首页",
          img: require("../assets/Myfooter/3.png")
        },
        {
          path: "/classify",
          name: "分类",
          img: require("../assets/Myfooter/1.png")
        },
        {
          path: "/find",
          name: "发现",
          img: require("../assets/Myfooter/2.png")
        },
        {
          path: "/shoppingCart",
          name: "购物车",
          img: require("../assets/Myfooter/5.png")
        },
        {
          path: "/mine",
          name: "我的",
          img: require("../assets/Myfooter/4.png")
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.active {
  color: red;
}
.Myfooter {
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color:white;

  ul {
    width: 100%;
    display: flex;
    height: 50px;
    align-items: center;
    text-align: center;
    li {
      width: 25%;

      img {
        width: 20px;
        height: 20px;
        margin: 2px 0 -3px 0px;
      }
    }
  }
}
</style>